<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--
User: GaoXiang
Version: 1.0
--%>

<style>
    .shop-images{
        list-style: none;
        padding:0;
    }
    .shop-images li{
        float: left;
        padding:15px;
    }
    .shop-images .goods-images-item{
        min-height:150px;
        min-width:150px;
    }
    .shop-images .goods-images-item div{
        margin-top: 5px;
    }
</style>
<!-- BEGIN FORM-->
<div class="portlet light bg-inverse">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-red-sunglo bold uppercase">商品</span>
            <span class="caption-helper">编辑</span>
        </div>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <div class="form-horizontal" id="editForm">
            <div class="form-body">

                <div class="form-group hide">
                    <label class="col-md-3 control-label">ID</label>
                    <div class="col-md-4">
                        <div class="input-icon">
                            <i class="fa fa-male"></i>
                            <input type="hidden" name="id" value="${data.id}">
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-3 control-label">商品图片</label>
                    <div class="col-md-8">
                        <div class="panel panel-default">
                            <div class="panel-heading">图片的最佳显示比例为：5:2，其它大小将造成拉伸显示。</div>
                            <div class="panel-body">
                                <ul class="shop-images">

                                    <c:forEach items="${data.bannerList}" var="img">
                                        <li>
                                            <div class="goods-images-item">
                                                <img src="${img.url}" style="max-width: 150px;max-height: 100px;">
                                                <div align="center">
                                                    <button type="button" class="btn btn-danger btn-xs"
                                                            onclick="deleteImg(this,'${img.id}')">删除图片
                                                    </button>
                                                </div>
                                            </div>
                                        </li>
                                    </c:forEach>

                                    <li id="addLi">
                                        <div class="goods-images-item">
                                            <div align="center">
                                                <input type="file" id="fileUpload" name="file" class="hide">
                                                <button type="button" class="btn btn-success btn-sm"
                                                        onclick="fileUpload.click()">添加图片
                                                </button>
                                            </div>
                                        </div>
                                    </li>

                                </ul>

                            </div>
                        </div>

                    </div>
                </div>



                <div class="form-group">
                    <label class="col-md-3 control-label">商品分类</label>
                    <div class="col-md-4">
                        <select class="form-control" name="typeId">
                            <c:forEach var="item" items="${typeList}">
                                <option value="${item.id}" ${item.id==data.typeId?'selected':''}>${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-3 control-label">商品名</label>
                    <div class="col-md-4">
                        <div class="input-icon">
                            <i class="fa  fa-qq"></i>
                            <input type="text" class="form-control" required value="${data.name}" name="name"
                                   placeholder="">
                        </div>
                    </div>
                </div>

                <div class="form-group hide">
                    <label class="col-md-3 control-label">简介</label>
                    <div class="col-md-4">
                        <div class="input-icon">
                            <i class="fa  fa-qq"></i>
                            <input type="text" class="form-control" required value="${data.intro}" name="intro"
                                   placeholder="">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-3 control-label">价格</label>
                    <div class="col-md-4">
                        <div class="input-icon">
                            <i class="fa  fa-qq"></i>
                            <input type="text" class="form-control" required value="${data.price}" name="price"
                                   placeholder="">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-3 control-label">商品介绍</label>
                    <div class="col-md-8">
                        <script id="editor" type="text/plain" style="min-height: 200px;">${data.content}</script>
                    </div>
                </div>

            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-5">
                        <button type="button" class="btn green" onclick="editGoods();">
                            <i class="fa  fa-cog fa-spin "></i>提交
                        </button>
                        <button type="button" class="btn default" onclick="history.go(-1);">
                            <i class="fa  fa-refresh fa-spin "></i>返回
                        </button>
                    </div>
                </div>
            </div>
            </form>
            <!-- END FORM-->
        </div>
    </div>
    <div class="hide">

        <li id="simpleLi">
            <div class="goods-images-item">
                <img src="/images/goods/ls61.jpg" style="max-width: 150px;max-height: 150px;">
                <input type="hidden" name="goodsImages" value="">
                <div align="center">
                    <button type="button" class="btn btn-danger btn-xs"
                            onclick="$(this).parent().parent().parent().remove();">删除图片
                    </button>
                </div>
            </div>
        </li>
    </div>

</div>
<script>


    $(document).ready(function () {
        initFileupload();
        if(window.UEditor){
            window.UEditor.destroy();
        }
        window.UEditor = UE.getEditor('editor',{
            toolbars: [[
                'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough','forecolor', 'backcolor',
                'insertorderedlist', 'insertunorderedlist',  '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                'simpleupload', 'emotion', 'scrawl', 'map',
            ]]
        });
    });

    function editGoods() {

        var param = tools.formParams("editForm");

        param["content"] = window.UEditor.getContent();

        if ($("input[name='goodsImages']").length==0) {
            tools.tip("请选择至少一张图片！", 1000, null, "danger");
            return;
        }

        tools.post("/goods/editGoods", param, function (data) {
            if (data.success) {
                tools.tip("修改成功", 500, function () {
                    history.go(-1);
                });
            } else {
                tools.tip("修改失败！错误代号：" + data.code, 1000, null, "danger");
            }
        });
    }


    function deleteImg(obj, imgId) {
        tools.post("/image/deleteImg", {"id": imgId}, function (data) {
            if (data.success) {
                $(obj).parent().parent().parent().remove();
                tools.tip("删除成功");
            }
        });
    }


    /**
     * 添加图片
     * @param src
     */
    function createImgLi(src) {
        var imgLi = $("#simpleLi").clone();
        imgLi.find("img").eq(0).attr("src", "/image/showImg?src=" + src);
        imgLi.find("input").eq(0).val(src);
        imgLi.insertBefore($("#addLi"));
    }

    function initFileupload() {
        //console.log("开始上传");
        $('#fileUpload').fileupload({
            url: '/goods/uploadImg',
            formData: {},//如果需要额外添加参数可以在这里添加
            dataType: 'json',
            addClass: "img-thumbnail",
            done: function (e, result) {
                //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
                //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
                //返回的数据在result.result中
                var data = result.result;
                if (data.success) {
                    var src = data.data;
                    createImgLi(src);
                } else {
                    var _case = {
                        1: "请选择图片！",
                        2: "图片上传失败！"
                    };
                    tools.errorTip(_case, data.code);
                }

            }
        });
    }

</script>